<template>
  <div class="merchant">
    <div class="merchant-top">
      <div class="merchant-top-top">
        <div class="top-left">
          <h3 style="margin-bottom: 10px">{{ shops.name }}</h3>
          <div>
            <van-rate
              v-model="shops.score"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <!-- <span>({{shops.score}})</span> -->
            <span>月售{{ shops.sellCount }}单</span>
          </div>
        </div>
        <div class="top-right">
          <van-icon name="like-o" size="30px" />
          <p>已收藏</p>
        </div>
      </div>
      <div class="merchant-top-main">
        <div class="title">
          <p style="margin-bottom: 10px">起送价</p>
          <p>
            <span style="font-size: 20px">{{ shops.minPrice }}</span
            >元
          </p>
        </div>
        <div class="title">
          <p style="margin-bottom: 10px">商家配送</p>
          <p>
            <span style="font-size: 20px">{{ shops.deliveryPrice }}</span
            >元
          </p>
        </div>
        <div class="title">
          <p style="margin-bottom: 10px">平均配送时间</p>
          <p>
            <span style="font-size: 20px">{{ shops.deliveryTime }}</span
            >分钟
          </p>
        </div>
      </div>
    </div>
    <div class="merchant-main">
      <h3 style="margin-bottom: 20px;">活动与公告</h3>
      <div class="merchant-main-top">
            <p style="color:#e03e16">{{shops.bulletin}}</p>
      </div>
      <p v-for="item in shops.supports" :key="item">{{item}}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getGoods } from "../../api/goods";
// 店铺信息对象约束
interface IShop {
  avatar?: string; // 店铺头像
  bulletin?: string; // 店铺描述
  date?: Array<string>; // 营业时间
  deliveryPrice?: number; // 配送费
  deliveryTime?: number; // 送达时间
  description?: string; // 配送方式
  id?: number; //
  minPrice?: number; // 起送费
  name?: string; // 商品名字
  pics?: Array<string>; // 店铺图片
  score?: number; // 店铺评分
  sellCount?: number;
  supports?: Array<string>;
}
@Component
export default class Merchant extends Vue {
  shops: IShop = {};
  async created() {
    let res = await $_getGoods();
    // console.log(res.data.data);
    this.shops = res.data.data;
  }
}
</script>

<style scoped>
.merchant {
  width: 100%;
  height: 100%;
  background: #f4f5f7;
}
.merchant-top {
  width: 100%;
  padding: 0 20px;
  background: #fff;
  margin-bottom: 20px;
}
.merchant-main {
  width: 100%;
  padding:  20px;
  background: #fff;
}
.merchant-top-top {
  background: #fff;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.merchant-main-top {
  background: #fff;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.merchant-top-main {
  background: #fff;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  align-items: center;
}
.top-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
